<template>
  <div id="app">
    <h1>state</h1>
    <div>{{ $store.state }}</div>
    <div>a:{{a}}</div>
    <hr>
    <h1>mutations</h1>
    <div>numA:{{ numA }}</div>
    <button @click="addNumA">numA++</button>
    <div>{{ numB }}</div>
    <button @click="addNumB">numB++</button>
    <hr>
    <h1>getters</h1>
    <div>age:{{ $store.getters.addAge }}</div>
    <div>{{ message }}</div>
    <div>{{ getTodoById(1) }}</div>
    <div>{{ getTodoById(2).title }}</div>
    <hr>
    <h1>Actions</h1>
    <ul v-for="(item) in newList" :key="item.id">
      <li>{{ item.title }}</li>
    </ul>
    <button @click="requestList">请求list</button>
    <router-view />
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
export default {
  data() {
    return {

    }
  },
  created() {
    console.log('$store.state', this.$store.state)
    // 模块
    console.log('userInfo', this.$store.state)
    setTimeout(() => {
      console.log('mapUserInfo', this.userInfo)
    }, 2000)
  },
  computed: {
    ...mapState(['a']),
    ...mapState({ numA: 'a', numB: 'b', newList: 'spList' }),
    // 模块
    // ...mapState(['user']),
    // ...mapState('user', { userInfo: 'userInfo' }),
    // ...mapState('user', ['userInfo']),
    ...mapGetters(['message', 'getTodoById'])
  },
  methods: {
    ...mapActions(['mnGetList']),
    ...mapMutations(['addA', 'addB']),
    addNumA() {
      this.$store.commit('addA')
    },
    addNumB() {
      this.addB(10)
      // this.addB({i:10})
      // this.addB([1,2,3])
    },
    requestList() {
      this.mnGetList({ pageSize: 10 })
    }
  },
}
</script>

<style lang="less"></style>
